<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="属性配置" name="field" />
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <el-form size="small" label-width="100px">
          <div v-for="(item, index) in cmps" :key="index">
            <component
              v-if="item.name === activeItem.compType"
              :getFormId="getFormId"
              :optionsList='optionsList'
               :list='itemList'
               :tablist="tablist"
               :tablelist="tablelist"
              :props="activeItem"
              :is="item.content"
            ></component>
          </div>
        </el-form>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import reg from "./custom/register";
import { api } from "../server/api";

export default {
  name: "configPanel",
  data() {
    return {
      currentTab: "field",
      cmps: reg,
      formIdArray: [],
      optionsList:[],
      tablelist:[],
      tablist:[],
    };
  },
  props: {
    activeItem: {
      type: Object,
      default: function () {
        return {};
      },
    },
    itemList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  created() {
    console.log( this.itemList)
    this.cmps.forEach((c) => {
      c.content = require(`./custom/configs/${c.name}`).default;
    });
    this.getList();
    this.stdappDictTbls();
    this.stdappChildTbls();
  },
  methods: {
     stdappChildTbls(){
        api.stdappChildTbls(this.$route.query.moduleId).then(res=>{
             console.log(res)
             this.tablist=res
        })
     },
     stdappDictTbls() {
      api.stdstDataTableLst({}).then(res => {
       const finvalue=res.filter(val=>{
          return val.tableType===0
        })
        console.log(finvalue)
        this.tablelist = finvalue
      })
    },
    getList() {
      api
        .stdappDictTbls({ })
        .then((res) => {
          this.optionsList = res;
          // this.alllist = JSON.stringify(res);
        });
    },
    getFormId(itemId) {
      this.formIdArray = [];
      Array.from(this.itemList, (item) => {
        if (item.compType === "row") {
          Array.from(item.columns, (column) => {
            Array.from(column.list, (col) => {
              if (col._id !== itemId) {
                this.formIdArray.push(col.id);
              }
            });
          });
        } else {
          if (item._id !== itemId) {
            this.formIdArray.push(item.id);

          }
        }
      });
      return this.formIdArray;
    },
  },
};
</script>
<style>
.field-box .el-input-number--small{
width: 94% !important;
}
.field-box .el-select--small{
width: 94% !important;
}
.field-box .el-input{
width: 94% !important;
}

</style>
<style scoped>
.field-box >>> .el-scrollbar__wrap {
  overflow-x: hidden;

}


</style>